<template>
  <div class="row">
    <div class="col-6">这里是首页哦</div>
    <div class="col-6">
      <!-- 命名视图 -->
      <router-view name="header" class="header"></router-view>
    </div>
  </div>

  <div class="row">
    <div class="col-4">
      <!-- 命名视图 -->
      <router-view name="sidebar" class="sidebar"></router-view>
    </div>
    <div class="col-8">
      <!-- 命名视图 -->
      <router-view name="main" class="main"></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home.vue"
}
</script>

<style scoped>
.header {
  border: 1px solid blue ;
}
.sidebar {
  min-height: 400px ;
  background: #ff815a;
}
</style>